<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">移除数据</button>
    <button class="clear">清空数据</button>
    <script>
        /*
            sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。
            它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。
         */
        document.querySelector(".set").addEventListener("click", function () {
            //存储数据：  sessionStorage.setItem(key,value)
            sessionStorage.setItem("name", "陶品奇")

        })

        document.querySelector(".get").addEventListener("click", function () {
            //获取数据：  sessionStorage.getItem(key)
            const name =   sessionStorage.getItem("name")
            console.log(name);

        })
        document.querySelector(".remove").addEventListener("click", function () {
            //移除数据：  sessionStorage.removeItem(key)
            sessionStorage.removeItem("name")

        })

        document.querySelector(".clear").addEventListener("click", function () {
            //清空数据：   sessionStorage.clear()
            sessionStorage.clear()

        })
    </script>
</body>

</html>